<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>注册-CSTA计算机科技协会</title>
		<link rel="Shortcut Icon" href="public/img/favicon.ico" />
		<link rel="stylesheet" href="public/bootstrap/css/bootstrap.min.css" />
		<script src="public/js/jquery-3.2.1.min.js"></script>
		<script src="public/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="public/css/style.css" />
	</head>
	
	<script type="text/javascript">
		function changeImg(obj){
			obj.src="${pageContext.request.contextPath}/identifyingCode?time="+new Date().getTime();
		}
		
		function checkUserId(){
			var uValue = document.getElementById("userId").value;
			var flag = true;
			$.ajax({
				url:"${pageContext.request.contextPath}/checkIdAjax?method=register",
				async:false,
				type:"POST",
				data:{"useridAjax":uValue},
				success:function(data){
					if(data.registerAjaxError==true){
						$("#userIdError").html("用户名已存在！");
						flag=false;
					}else{
						$("#userIdError").html("用户名可使用！");
					}
				},
				error:function(){
					alert("请求失败");
				},
				dataType:"json"
			});
			if(flag==false){
				return false;
			}
			if(uValue.length!=9){
				document.getElementById("userIdError").innerHTML="学号格式不正确！";
				return false;
			}
			return true;
		}
		function checkPassword(){
			var uValue = document.getElementById("password").value;
			if(uValue.length<6){
				document.getElementById("passwordError").innerHTML="密码长度不能低于6位！";
				return false;
			}
			return true;
		}
		function checkRePassword(){
			var uValue1 = document.getElementById("password").value;
			var uValue2 = document.getElementById("rePassword").value;
			if(uValue1 != uValue2){
				document.getElementById("rePasswordError").innerHTML="两次输入密码不一致";
				return false;
			}
			return true;
		}
		function hideError(id){
			document.getElementById(id+"Error").innerHTML="";
		}
		function checkForm(){
			
			if(checkUserId()&&checkPassword()&&checkRePassword()){
				return true;
			}
			return false;
		}
		
	</script>
	<body>
		
		<!--顶部效果-->
		<%@ include file="/Header.jsp" %>
		
		<!--注册标识-->
		<div class="login-title">注册</div>
		<!--注册框-->
		<div class="row">
			<div class="col-md-offset-3 col-md-6">
				<div class="form-line-up"></div>
				<div class="row">
					<div class="col-md-offset-1 col-md-10">
						<div class="panel panel-primary">
							<div class="panel-heading">
								<div class="panel-title" style="text-align: center;">
									<img style="height: 90px;" src="public/img/科协Logo.png" alt="">
								</div>
							</div>
							<div class="panel-body">
								<form action="${pageContext.request.contextPath}/userServlet?method=register" method='post' onsubmit="return checkForm()">
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-user'></span>
											</span>
											<input type="text" class='form-control'
												 onfocus="hideError('userId')" onblur="checkUserId()"
												 placeholder='学号' name="userid" id="userId">
										</div>
										<h4 class = "error" id="userIdError"></h4>
									</div>
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-lock'></span>
											</span>
											<input type="password" class='form-control' 
												 onfocus="hideError('password')" onblur="checkPassword()" 
												 placeholder='密码' name="password" id="password">
										</div>
										<h4 class = "error" id="passwordError"></h4>
									</div>
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-lock'></span>
											</span>
											<input type="password" class='form-control'
								 				 onfocus="hideError('rePassword')" onblur="checkRePassword()" 
												 placeholder='确认密码' name="rePassword" id="rePassword">
										</div>
										<h4 class = "error" id="rePasswordError"></h4>
									</div>
									
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-info-sign '></span>
											</span>
											<input type="text" class='form-control' placeholder='验证码' name="code" style="width:310px">&nbsp;&nbsp;
											<span>
												<img onclick="changeImg(this)" src = "${pageContext.request.contextPath}/identifyingCode" />
											</span>
										</div>
										<h4 class="error">
											${requestScope['codeErrorMsg']}
										</h4>
									</div>
									<div class="form-group ok" style="text-align: center;">
										<input style="width: 100%;" type="submit" value="注册" class='btn btn-primary btn-lg'>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!--底部效果-->
		<%@ include file="/Footer.jsp"%>
	</body>
</html>